// Popup styling

.popup-arrow {
    &.up { border-bottom-color: var(--popup-light-shade); }
    &.down { border-top-color: var(--popup-light-shade); }
    &.left { border-right-color: var(--popup-light-shade); }
    &.right { border-left-color: var(--popup-light-shade); }
}

.popup {
    background-color: var(--popup-light-color);
    color: var(--popup-light-text);
    border-radius: @border-radius;
    border: 1px solid var(--popup-light-shade);

    // Generic links
    a.button {
      border: none;
      border-radius: @border-radius;
      padding: 10px 10px;
      display: inline-block;
      background-color: var(--grey-1);
      color: var(--grey-7);
      border-radius: @border-radius;
      outline:0;
      transition: 0.2s all ease;
      &:hover { background-color: var(--c-primary); color: var(--bg-primary); }
    }

    // TOC links
    a.toc-link {
        color: var(--popup-light-text);
        transition: @fast-transition background-color ease;
        text-decoration:none;
        line-height:150%;
        &:hover { background-color: var(--grey-2); }
    }

    p {text-align:center; }

    button {
        border:none;
        font-size:200%;
        background-color: var(--popup-light-color);
        color: var(--popup-light-text);
        text-align:center;
    }

    // Elements inside popups
    form {
        input, button {
            background-color: transparent;
            color: inherit;
            transition: @fast-transition background-color ease;

            &[type="submit"]:hover {
              background-color: darken(@popup-light-color, 10%);
            }
        }
    }

    // Icon selector buttons
    .icon-block:hover { background-color: var(--grey-2); }

    // Formatting
    .formatting {
        a {
            text-decoration:none;
            color:inherit;
            transition: @fast-transition background-color ease;

            &:hover { background-color: var(--grey-2); }

            &#header-formatting:hover { background-color:transparent; }

            span.markdownHeading1, span.markdownHeading2, span.markdownHeading3,
            span.markdownHeading4, span.markdownHeading5, span.markdownHeading6 {
                text-align:center;
                font-weight:bold;

                &.active { color:var(--c-primary); }
            }
        }

        hr { border-bottom:1px solid var(--grey-3); }
    }

    // SEARCH POPUP
    .search {
        input {
            font-size:100%;
            text-align:left;
            background-color: transparent;
            color:inherit;

            &.regexp { color: var(--c-primary); }
        }

        input#searchWhat {
          border-bottom: 1px solid var(--grey-5);
          border-right: 1px solid var(--grey-5);
          transition: 0.5s background-color,color ease;

          &.not-found {
            background-color: var(--red-4);
            color: white;
          }
        }

        input#replaceWhat {
          border-right: 1px solid var(--grey-5);
        }

        button {
            border-radius:2px;
            font-size:@font-size-small;
            background-color:var(--grey-0);

            &:hover { background-color:var(--grey-1); }
        }
    }

    // Pomodoro timer
    .pomodoro {
        .pomodoro-task  { color: var(--pomodoro-task); }
        .pomodoro-short { color: var(--pomodoro-short); }
        .pomodoro-long  { color: var(--pomodoro-long); }

        .pomodoro-sound-container {
          font-size: 150%;
          text-align: center;
        }
    }

    // The table generator
    .table-generator {
      .row .cell {
        border: 1px solid black;
        &.active {
          background-color: var(--c-primary);
          border-color: var(--c-primary);
        }
      }
    }

    // Footnote edit popup
    .footnote-edit textarea {
        background-color:transparent;
        color:inherit;
        font-family: inherit;
    }
}
